<template>
	<view class="pageWrapper">
		<view class="pageInner">
			<view class="mainTitle">
				请选择符合您的信息
			</view>
			<view class="subTitle">
				完成后可领取免费模拟试题及各项权益
			</view>
			<view class="cityTitle">
				所在省市
			</view>
			<view class="cityBox flex flex-between" @click="openAddress">
				<view class="cityValue">
					{{ (province + city) ?province + city : '地区' }}
				</view>
				<image class="downIcon" src="https://xgd.izaodao.com/public_html/Public/yn/login/painter/arrowdown.png" mode=""></image>
			</view>
			<view class="gradeTitle">
				所处年级
			</view>
			<view class="tabArea flex">
				<view v-for="(item,index) of tabList" :key="index" @click="changeTab(index)" class="tabItem"
					:class="tabIndex == index ? 'selItem' : '' ">
					<view class="blueLine"></view>
					{{ item.label }}
				</view>
			</view>
			<view class="gradeArea">
				<view v-for="(item,index) of gradeList" :key="index" @click="changeGrade(item,index)"
					class="gradeItem flex-all-center" :class="gradeIndex == index ? 'selGrade' : '' ">
					{{ item.name }}
				</view>
			</view>
			<view class="confirmBtn flex-all-center" :class="gradeIndex !== null ? 'noramlColor' : '' " @click="showDialog">
				确认开始学习
			</view>
		</view>

		<!-- 省市选择器 -->
		<liu-choose-address ref="scroll" @change='chooseSuccess'></liu-choose-address>

		<!-- 弹窗 -->
		<u-popup :show="dialogStatus" @close="close" @open="open" bgColor="transparent" mode="center">
			<image class="tipImg" src="https://xgd.izaodao.com/public_html/Public/yn/login/painter/tipImg.png" mode=""></image>
			<text class="tipText">恭喜获得 <text style="color: #FED502;">{{ freeDays }}</text> 天VIP体验！</text>
		</u-popup>
	</view>
</template>

<script>
	import api from '@/api/api.js'
	export default {
		data() {
			return {
				dialogStatus: false,
				city: null,
				province:null,
				tabIndex: 0,
				tabList: [{
					id: 1,
					label: '初中'
				}, {
					id: 2,
					label: '高中'
				}],
				gradeIndex: null,
				gradeList: [],
				gradeId:0,
				freeDays:0
			}
		},
		onLoad() {
			this.getGrade()
			this.getVipInfo()
		},
		methods: {
			getGrade(){
				var obj = {
					stage:'初中'
				}
				api.getGrade(obj).then(res=>{
					this.gradeList = res.data
				})
			},
			getVipInfo(){
				api.vipInfo().then(res=>{
					this.freeDays = res.data.freeDays
				})
			},
			changeTab(index) {
				if (this.tabIndex == index) return
				this.tabIndex = index
				var obj = {
					stage:index==0?'初中':'高中'
				}
				api.getGrade(obj).then(res=>{
					this.gradeList = res.data
				})
				this.gradeIndex = null
				console.log('gradeList', this.gradeList)
			},
			changeGrade(item,index) {
				if (this.gradeIndex == index) return
				this.gradeId = item.id
				this.gradeIndex = index
				console.log(item)
			},
			openAddress() {
				this.$refs.scroll.open()
			},
			chooseSuccess(e) {
				console.log('所选择的地址信息:', e)
				this.province = e.value[0].label
				this.city = e.value[1].label + e.value[2].label
			},
			open() {
				// console.log('open');
			},
			close() {
				this.dialogStatus = false
				// console.log('close');
			},
			showDialog () {
				var token = uni.getStorageSync('AUTH_TOKEN')
				api.updateUser(token,{
					name:'',
					gradeId:this.gradeId,
					province:this.province,
					city:this.city
				}).then(res=>{
					
					
				})
				
				if(this.gradeIndex == null) return 
				this.dialogStatus = true
				setTimeout(()=>{
					uni.switchTab({
						url: '/pages/home/index'
					})
				},2000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pageWrapper {
		padding-top: var(--status-bar-height);
		padding-bottom: var(--window-bottom);
		// padding-left: 40rpx;
		// padding-right: 40rpx;
		width: 100vw;
		height: 100vh;
		background: linear-gradient(180deg, #E6EEFF 0%, #FFFFFF 100%);

		.pageInner {
			padding: 0 40rpx;

			.mainTitle {
				margin-top: 120rpx;
				color: #282828;
				font-size: 50rpx;
				font-weight: bold;
			}

			.subTitle {
				color: #999;
				font-size: 26rpx;
			}

			.cityTitle,
			.gradeTitle {
				margin-top: 64rpx;
				color: #282828;
			}

			.cityBox {
				margin-top: 28rpx;
				border-bottom: 1rpx solid #999999;

				.cityValue {
					font-weight: bold;
				}

				.downIcon {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.tabArea {
				margin-top: 28rpx;
				gap: 40rpx;

				.tabItem {
					position: relative;
					color: #999999;
					font-weight: bold;
				}

				.selItem {
					color: #000;

					.blueLine {
						position: absolute;
						bottom: 0;
						width: 100%;
						height: 10rpx;
						background: rgba(3, 162, 236, .8);
						transition: background .4s;
					}
				}
			}

			.gradeArea {
				margin-top: 58rpx;

				.gradeItem {
					height: 90rpx;
					color: #999999;
					font-weight: bold;
					background: #FFFFFF;
					border-radius: 50rpx;

					&:nth-child(n+2) {
						margin-top: 30rpx;
					}
				}

				.selGrade {
					color: #FFF;
					background: #03A2EC;
				}
			}

			.confirmBtn {
				margin-top: 100rpx;
				height: 90rpx;
				color: #FFF;
				font-size: 36rpx;
				background: #999;
				border-radius: 50rpx;
			}

			.noramlColor {
				background: #03A2EC;
			}
		}

	}
	.tipImg {
		display: block;
		width: 556rpx;
		height: 666rpx;
	}
	.tipText {
		position: absolute;
		top: 100rpx;
		left: 88rpx;
		white-space: nowrap;
		font-size: 40rpx;
		font-weight: bold;
		color: #FFF;
	}
</style>